<template>
  <chartTemplate
    :option="option"
    ref="chart"
    class="chart"
    :height="height"
  ></chartTemplate>
</template>
<script>
import chartTemplate from '@/assets/js/common/chartTemplatePlugin/chartTemplate.vue'
export default {
  name: 'doubleLine',
  components: { chartTemplate },
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    height: { type: Number, default: () => 300 }
  },
  computed: {
    option() {
      this.handleData()
      let option = {
        grid: {
          top: 35,
          bottom: 30
        },
        legend: {
          data: this.legend,
          right: 10,
          top: 0,
          itemWidth: 25,
          itemHeight: 10,
          textStyle: {
            color: 'rgba(255,255,255,1)'
          }
        },
        tooltip: {
          backgroundColor: 'rgba(17,95,234,0)',
          trigger: 'axis',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',
            shadowStyle: {
              opacity: 0
            }
          },
          className: 'line-hover-bg',
          position: (point, params, dom, rect, size) => {
            return [point[0] - 15, 35]
          },
          formatter: (params) => {
            let dom = `
          <div class="H_Regular" style='position: absolute;left:20px;top:20px'>${params[0].name}${this.chartData.xUnit}</div>
          <div class="D-DIN-Bold"  style='position: absolute;left:20px;top:40px; font-size: 16px;'>${params[0].value}${this.chartData.lineData[0].unit}</div>
          <div class="D-DIN-Bold" style='position: absolute;left:20px;top:60px; font-size: 16px;'>${params[1].value}${this.chartData.lineData[1].unit}</div>
      `
            return dom
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#f0f0f0'
          },
          data: this.chartData.xData,
          axisTick: {
            show: false
          },
          axisLine: { show: false },
          name: this.chartData.xUnit,
          boundaryGap: false,
          nameLocation: 'end',
          nameTextStyle: {
            color: '#f0f0f0',
            verticalAlign: 'top',
            padding: [9, 0, 0, 10]
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            axisLabel: {
              color: 'rgba(240,240, 240, .7)'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            }
          },
          {
            type: 'value',
            position: 'right',
            max: 100,
            axisLine: { show: false },
            axisLabel: {
              color: 'rgba(240,240, 240, .7)',
              formatter: '{value} %'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            },
            nameTextStyle: {
              align: 'center',
              color: 'rgba(240,240, 240, .7)'
            }
          }
        ],
        series: this.seriesData
      }
      return option
    }
  },
  data() {
    return {
      lineColor: ['rgba(9, 109, 217, 0.8)', 'rgba(36, 220, 247, 0.8)'],
      areaColor: [
        ['rgba(9, 109, 217, 0)', 'rgba(9, 109, 217, 0.4)'],
        ['rgba(36, 220, 247, 0)', 'rgba(36, 220, 247, 0)']
      ],
      symbolColor: ['rgba(9, 109, 217, 1)', 'rgba(36, 220, 247, 1)'],
      seriesData: [],
      chart: null,
      legend: []
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.addLabel('start').add(this.$refs.chart.init(), 'start+=0.1')
      return tl
    },
    handleData() {
      let [_xAxis, _series, _legend] = [[], [], []]
      this.chartData.lineData.map((item, i) => {
        let seriesItem = {
          type: 'line',
          name: item.name,
          smooth: true,
          yAxisIndex: item.unit == '%' ? 1 : 0,
          symbolSize: item.unit == '%' ? 8 : 0,
          symbol: 'circle',
          lineStyle: {
            color: this.lineColor[i]
          },
          itemStyle: {
            color: this.symbolColor[i],
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: this.areaColor[i][0]
                },
                {
                  offset: 1,
                  color: this.areaColor[i][1]
                }
              ],
              false
            )
          },
          data: item.data
        }
        _series.push(seriesItem)
        _legend.push(item.name)
      })
      this.seriesData = _series
      this.legend = _legend
    }
  }
}
</script>
<style lang="scss"></style>
